<script lang="ts" setup>
import { ref } from 'vue'
import { useLevelStore } from '@/stores/level'
import { subjectPage, subjectDelete, type subjectType } from '@/api/jiaoyu' // 导入删除方法
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus' // 引入消息框

const router = useRouter()

const formInline = ref({
  "level": '',  //年级
  "pageIndex": 1,
  "pageSize": 10
})

const LevelStore = useLevelStore()

const onSubmit = () => {
  getList()
}

function Add(){
  router.push("/xuekeadd")
}

function Edit(row: subjectType) {
  router.push(`/xuekeedit/${row.id}`)
}

// 删除功能
async function Del(row: subjectType) {
  try {
    // 确认对话框
    await ElMessageBox.confirm(
      `确定要删除学科 "${row.name}" 吗?`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    // 调用删除接口
    const res = await subjectDelete(row.id)
    if (res.code === 1) {
      ElMessage.success('删除成功')
      // 刷新列表
      getList()
    } else {
      ElMessage.error(res.message || '删除失败')
    }
  } catch (error) {
    // 用户点击了取消
    ElMessage.info('已取消删除')
  }
}

const tableData = ref<subjectType[]>([])

function getList() {
  subjectPage(formInline.value).then(res => {
    if (res.code === 1) {
      tableData.value = (res.response?.list as subjectType[])
      total.value = (res.response?.total as number) * formInline.value.pageSize
    }
  })
}
getList()

const total = ref(0)

const handleSizeChange = (val: number) => {
  formInline.value.pageSize = val
  getList()
}

const handleCurrentChange = (val: number) => {
  formInline.value.pageIndex = val
  getList()
}
</script>

<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item>
      <h3>年级:</h3>
      <div style="width: 10px;"></div>
      <el-select v-model="formInline.level" style="width: 200px" clearable>
        <el-option v-for="item in LevelStore.list" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button type="primary" @click="Add">添加</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="Id" width="180" />
    <el-table-column prop="name" label="学科" width="180" />
    <el-table-column prop="levelName" label="年级" />
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <!-- 确保传递行数据 -->
        <el-button @click="Edit(scope.row)">编辑</el-button>
        <!-- 确保传递行数据 -->
        <el-button type="danger" @click="Del(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  <div style="margin-top: 20px; display: flex; justify-content: center;">
    <el-pagination background layout="prev, pager, next" :total="total" 
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>